<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>腾讯云播放器</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #0078d7;
            text-align: center;
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .btn {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #005a9e;
        }
        .player-container {
            margin-top: 20px;
            width: 100%;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        #video-container {
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 宽高比 */
            position: relative;
        }
        #tcplayer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #player-status {
            margin-top: 10px;
            padding: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 14px;
            color: #666;
            text-align: center;
        }
        .mode-selector,
        .format-selector {
            margin-bottom: 15px;
        }
        .mode-selector label,
        .format-selector label {
            margin-right: 10px;
        }
        .tips {
            margin-top: 20px;
            background: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            font-size: 14px;
        }
        .tips h3 {
            margin-top: 0;
            color: #0078d7;
        }
        .tips ul {
            padding-left: 20px;
        }
    </style>
    <!-- 引入腾讯云TCPlayer样式 -->
    <link href="release/tcplayer.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>腾讯云播放器</h1>
        
        <div class="input-group">
            <label for="play-url">播放地址</label>
            <input type="text" id="play-url" placeholder="请输入播放地址，例如：http://example.com/live/stream.flv">
        </div>
        
        <div class="mode-selector">
            <label>播放模式：</label>
            <label><input type="radio" name="mode" value="live" checked> 直播</label>
            <label><input type="radio" name="mode" value="vod"> 点播</label>
        </div>
        
        <div class="format-selector">
            <label>播放格式：</label>
            <label><input type="radio" name="format" value="flv" checked> FLV</label>
            <label><input type="radio" name="format" value="hls"> HLS(m3u8)</label>
            <label><input type="radio" name="format" value="mp4"> MP4</label>
            <label><input type="radio" name="format" value="webrtc"> WebRTC</label>
        </div>
        
        <button id="play-btn" class="btn">开始播放</button>
        
        <div class="player-container">
            <div id="video-container">
                <video id="tcplayer" controls></video>
            </div>
            <div id="player-status">播放器已就绪，请输入播放地址并点击开始播放</div>
        </div>
        
        <div class="tips">
            <h3>使用说明</h3>
            <ul>
                <li><strong>播放模式：</strong>
                    <ul>
                        <li><strong>直播模式：</strong>适用于实时流媒体，如直播活动、会议等</li>
                        <li><strong>点播模式：</strong>适用于预先录制的视频内容</li>
                    </ul>
                </li>
                <li><strong>支持的格式：</strong>
                    <ul>
                        <li><strong>FLV：</strong>适用于直播流，低延迟，兼容性好</li>
                        <li><strong>HLS(m3u8)：</strong>适用于直播和点播，自适应码率，兼容性最佳</li>
                        <li><strong>MP4：</strong>主要用于点播，几乎所有设备都支持</li>
                        <li><strong>WebRTC：</strong>超低延迟直播，适合实时互动场景</li>
                    </ul>
                </li>
                <li>系统会根据输入的URL自动选择合适的格式和模式</li>
                <li>如果播放失败，请检查地址是否有效或尝试其他格式</li>
                <li><strong>播放地址示例：</strong>
                    <ul>
                        <li>FLV直播：http://example.com/live/stream.flv</li>
                        <li>HLS直播：http://example.com/live/stream.m3u8</li>
                        <li>HLS点播：http://example.com/vod/video.m3u8</li>
                        <li>MP4点播：http://example.com/video/file.mp4</li>
                        <li>WebRTC直播：webrtc://example.com/live/stream</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    
    <!-- 使用腾讯云TCPlayer SDK -->
    <script src="release/tcplayer.v5.1.0.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var playBtn = document.getElementById('play-btn');
            var playUrlInput = document.getElementById('play-url');
            var statusElement = document.getElementById('player-status');
            var player = null;
            
            // 从URL参数中获取播放地址
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
            
            // 获取选中的格式
            function getSelectedFormat() {
                var formatElements = document.getElementsByName('format');
                for (var i = 0; i < formatElements.length; i++) {
                    if (formatElements[i].checked) {
                        return formatElements[i].value;
                    }
                }
                return 'flv'; // 默认格式
            }
            
            // 获取播放模式
            function getPlayMode() {
                var modeElements = document.getElementsByName('mode');
                for (var i = 0; i < modeElements.length; i++) {
                    if (modeElements[i].checked) {
                        return modeElements[i].value === 'live';
                    }
                }
                return true; // 默认为直播模式
            }
            
            // 自动检测并设置格式和模式
            function autoDetectFormatAndMode(url) {
                url = url.toLowerCase();
                var formatElements = document.getElementsByName('format');
                var modeElements = document.getElementsByName('mode');
                
                // 根据URL后缀或协议前缀自动选择格式
                if (url.endsWith('.flv')) {
                    formatElements[0].checked = true;
                } else if (url.endsWith('.m3u8')) {
                    formatElements[1].checked = true;
                } else if (url.endsWith('.mp4')) {
                    formatElements[2].checked = true;
                    modeElements[1].checked = true; // MP4通常是点播
                } else if (url.startsWith('webrtc://')) {
                    formatElements[3].checked = true;
                }
                
                // 根据URL中的关键词判断是直播还是点播
                if (url.includes('live') || url.includes('stream') || url.includes('rtmp') || 
                    url.startsWith('webrtc://') || url.includes('pull')) {
                    modeElements[0].checked = true;
                } else if (url.includes('vod') || url.includes('video') || url.endsWith('.mp4')) {
                    modeElements[1].checked = true;
                }
            }
            
            // 初始化播放器
            function initPlayer(url, type) {
                // 销毁现有播放器实例
                if (player) {
                    try {
                        player.dispose();
                        player = null;
                    } catch (e) {
                        console.error('销毁播放器实例时出错:', e);
                    }
                }
                
                // 确保DOM元素存在
                var videoElement = document.getElementById('tcplayer');
                if (!videoElement) {
                    var videoContainer = document.getElementById('video-container');
                    videoElement = document.createElement('video');
                    videoElement.id = 'tcplayer';
                    videoElement.controls = true;
                    videoContainer.innerHTML = '';
                    videoContainer.appendChild(videoElement);
                }
                
                statusElement.textContent = "正在初始化播放器...";
                
                // 创建播放器配置
                var playerConfig = {
                    type: type,
                    sources: [{src: url}],
                    autoplay: true,
                    controls: true,
                    live: getPlayMode(),
                    liveui: getPlayMode(),
                    volume: 0.5,
                    width: '100%',
                    height: '100%',
                    flash: {swf: 'release/player.swf'},
                    licenseUrl: "https://license.vod2.myqcloud.com/license/v2/1251510953_1/v_cube.license",
                    controlBar: {
                        children: ['playToggle', 'volumePanel', 'progressControl', 'fullscreenToggle']
                    }
                };
                
                // 根据格式添加特定配置
                if (type === 'flv') {
                    playerConfig.flvConfig = {
                        enableWorker: true,
                        enableStashBuffer: false,
                        stashInitialSize: 128,
                        autoCleanupSourceBuffer: true,
                        lazyLoad: false,
                        deferLoadAfterSourceOpen: false
                    };
                } else if (type === 'webrtc') {
                    playerConfig.webrtcConfig = {
                        connectTimeout: 30000,
                        receiveAudio: true,
                        receiveVideo: true,
                        debugMode: false
                    };
                }
                
                // 如果是直播模式，添加直播优化配置
                if (getPlayMode()) {
                    playerConfig.liveConfig = {
                        bufferBehind: 3,
                        maxBufferLength: 10,
                        bufferTime: 0,
                        rebufferTime: 1
                    };
                }
                
                // 创建新的播放器实例
                player = TCPlayer('tcplayer', playerConfig);
                
                // 播放器事件监听
                player.on('ready', () => statusElement.textContent = "播放器已准备就绪");
                player.on('play', () => statusElement.textContent = "正在播放...");
                player.on('error', (error) => statusElement.textContent = "播放错误: " + (error.message || JSON.stringify(error)));
                player.on('waiting', () => statusElement.textContent = "正在缓冲...");
                player.on('playing', () => statusElement.textContent = "正在播放中");
                player.on('ended', () => statusElement.textContent = "播放结束");
            }
            
            // 处理播放请求
            function handlePlayRequest(url) {console.log(url);
                if (!url) {
                    statusElement.textContent = "请输入有效的播放地址";
                    return;
                }
                autoDetectFormatAndMode(url);
                initPlayer(url, getSelectedFormat());
            }
            
            // 点击播放按钮事件
            playBtn.addEventListener('click', () => handlePlayRequest(playUrlInput.value.trim()));
            
            // 检查URL参数中是否有播放地址并立即播放
            var urlFromParam = getUrlParam('url');
            if (urlFromParam) {
                playUrlInput.value = urlFromParam;
                handlePlayRequest(urlFromParam);
            }
            
            // 自动检测URL格式变化
            playUrlInput.addEventListener('input', function() {
                autoDetectFormatAndMode(this.value.trim());
            });
        });
    </script>
</body>
</html>